<template>
  <div>
    <a-card title="Default size card" style="width: 300px">
      <a slot="extra" href="#">more</a>
      <p>card content</p>
      <p>card content</p>
      <p>card content</p>
    </a-card>
    <br />
    <div style="background:#ECECEC; padding:30px">
      <a-card title="Card title" :bordered="false" style="width: 300px">
        <p>Card content</p>
        <p>Card content</p>
        <p>Card content</p>
      </a-card>
    </div>
    <br />
    <a-card title="Card Title">
      <a-card-grid style="width:25%;text-align:center">
        Content
      </a-card-grid>
      <a-card-grid style="width:25%;text-align:center" :hoverable="false">
        Content
      </a-card-grid>
      <a-card-grid style="width:25%;text-align:center">
        Content
      </a-card-grid>
      <a-card-grid style="width:25%;text-align:center">
        Content
      </a-card-grid>
    </a-card>
    <br />
    <a-card hoverable style="width: 240px">
      <img
        slot="cover"
        alt="example"
        src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
      />
      <a-card-meta title="Europe Street beat">
        <template slot="description">
          www.instagram.com
        </template>
      </a-card-meta>
    </a-card>
    <br />
    <div style="background-color: #ececec; padding: 20px;">
      <a-row :gutter="16">
        <a-col :span="8">
          <a-card title="Card title" :bordered="false">
            <p>card content</p>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card title="Card title" :bordered="false">
            <p>card content</p>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card title="Card title" :bordered="false">
            <p>card content</p>
          </a-card>
        </a-col>
      </a-row>
    </div>
    <br />
    <a-card hoverable style="width: 300px">
      <img
        slot="cover"
        alt="example"
        src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
      />
      <template slot="actions" class="ant-card-actions">
        <a-icon key="setting" type="setting" />
        <a-icon key="edit" type="edit" />
        <a-icon key="ellipsis" type="ellipsis" />
      </template>
      <a-card-meta title="Card title" description="This is the description">
        <a-avatar
          slot="avatar"
          src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
        />
      </a-card-meta>
    </a-card>
    <br />
    <div>
      <a-card :loading="loading" title="Card title">
        whatever content
      </a-card>
      <a-button style="marginTop: 16px" @click="handleClick()">
        Toggle loading
      </a-button>
    </div>

    <br />
    <a-card
      style="width:100%"
      title="Card title"
      :tab-list="tabList"
      :active-tab-key="key"
      @tabChange="key => onTabChange(key, 'key')"
    >
      <span slot="customRender" slot-scope="item">
        <a-icon type="home" />{{ item.key }}
      </span>
      <a slot="extra" href="#">More</a>
      {{ contentList[key] }}
    </a-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tabList: [
        {
          key: "tab1",
          // tab: 'tab1',
          scopedSlots: { tab: "customRender" }
        },
        {
          key: "tab2",
          tab: "tab2"
        }
      ],
      contentList: {
        tab1: "content1",
        tab2: "content2"
      },
      loading: true
    };
  },
  methods: {
    handleClick() {
      this.loading = !this.loading;
    },
    onTabChange(key, type) {
      console.log(key, type);
      this[type] = key;
    }
  }
};
</script>
